<template>
	<div style="width:100%;height:74vh;position:relative;">
		<div v-if="answerlist.length==0">
			<div class="emptyBoxset">
				<img src="../../../assets/image/empty6.png" style="width:150px;" />
				<span>抱歉，当前栏目下没有内容！</span>
			</div>
		</div>
		<div class="tablebox" v-else>
			<h3 class="reportTitle">
				上报进度
				<JsonExcel
						class="export-excel-wrapper"
						:data="answerlist"
						:fields="json_fields"
						:header="title"
						:name="title+'.xls'"
					  >
					<el-button class="exprtBtn" type="primary" plain>导出</el-button>
				</JsonExcel>
			</h3>
			<table width="100%" cellspacing="0" cellpadding="0">
				<tr>
					<th v-for="item in answertableth">{{item}}</th>
				</tr>
				<tr v-for="item in answerlist">
					<td>{{item.schoolname?item.schoolname:'--'}}</td>
					<td>{{item.gradename?item.gradename:'--'}}</td>
					<!-- <td>{{item.company?item.company:'--'}}</td>
					<td>{{item.telephone?item.telephone:'--'}}</td> -->
					<td v-for="childern in item.nums">{{childern}}</td>
				</tr>
			</table>
			
		</div>
	</div>
</template>

<script>
	import navTop from "../../../components/head.vue"
	import {answerprogressjk} from '../../../api/api.js'
	import JsonExcel from 'vue-json-excel'
	export default{
		data(){
			return{
				screenWidth:'',
				answertableth:[],
				answerlist:[],
				title:'',
				json_fields:{
					'学校名称': 'schoolname',
					'年级': 'gradename',
					'负责人姓名': 'company',
					'负责人电话':'telephone',
					'语文':'score0',
					'数学':'score1',
					'英语':'score2',
					'物理':'score3',
					'化学':'score4',
					'生物':'score5',
					'历史':'score6',
					'地理':'score7',
					'政治':'score8'
				},
				result:[]
			}
		},
		mounted() {
			this.screenWidth = document.body.clientWidth
			this.answerprogressjkclick(this.$route.query.navid)
			this.title= this.$route.query.title
		},
		methods:{
			answerprogressjkclick(id){
				let params = {
					navId:id
				}
				answerprogressjk(params).then(res=>{
				 for(let i=0; i< res.list2.length; i++) {
				 let obj = {};
				 let one = res.list2[i];
				//         obj.studentname = one.studentname;
				//         obj.subjectscore = one.subjectscore;
				 for (let j=0; j< one.nums.length; j++) {
				 let rs = one.nums[j];
							// obj['wscore'+rs.sourename] = rs.score;
							obj['score'+j] = rs;
				 } 
						this.result.push({...one,...obj})
				 }
					for(let i=0; i< res.list1.length; i++) {
				 let objname = {};
				let onename = res.list1[i];
					}
					// this.answerlist = res.list2
					this.answerlist = this.result
					res.list1.splice(res.list1.indexOf('负责人姓名'),1)
					res.list1.splice(res.list1.indexOf('负责人电话'),1)
					this.answertableth = res.list1
				})
			}
		},
		components:{navTop,JsonExcel}
	}
</script>

<style scoped>
	.tablebox{
		box-sizing: border-box;
		background:#fff;
		margin:15px auto;
		padding:20px;
		min-height:74vh;
	}
	.tablebox table{
		border-top:solid 1px #C5D5F4;
		border-left:solid 1px #C5D5F4;
	}
	.tablebox table tr td,.tablebox table tr th{
		border-bottom:solid 1px #C5D5F4;
		border-right:solid 1px #C5D5F4;
		text-align: center;
		line-height:48px;
	}
	.tablebox table tr th{
		background:#EAF1FF 100%;
		font-size:16px;
		color:#333;
		font-weight:normal;
	}
	.reportTitle{
		font-size:16px;
		font-weight: normal;
		padding-bottom:20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.emptyBoxset{
		text-align: center;
		position:absolute;
		left:50%;
		top:50%;
		transform: translate(-50%,-50%);
	}
	.emptyBoxset span{
		display: block;
		font-size:14px;
		padding-top:20px;
	}
	.emptyBoxset img{
		width:200px;
		height:auto;
	}
</style>